<template>
	<view class="container">
	  <view class="top_box flex_box">
	    <view class="flex1 flex_box">
	      <image src="@/static/images/pos.png" class="pos_icon"></image>
	      <view class="pos_text" @tap="choosePos">
					{{position?position.city:'选择定位'}}
					<!-- <picker @change="bindPickerChange" mode='region'>
						{{position?position.district:'选择定位'}}
					</picker> -->
				</view>
	      <image src="@/static/images/right.png" class="right_icon"></image>
	    </view>
	    <view @tap="goCart" class="btn cart_btn">购物车</view>
	  </view>
	  <swiper :autoplay="true" class="swiper_box">
	    <block v-for="item in swiperList" :key="item.id">
	      <swiper-item>
	        <image :src="item.advertPic" class="swiper-item"></image>
	      </swiper-item>
	    </block>
	  </swiper>
	  <view class="tabs flex_box">
	    <view 
	      class="tab_item" 
				:class="tabIndex==index?'cur':''"
	      @tap='tabChange(index)'
				:key='item.id'
	      v-for='(item,index) in list'>{{item.columnName}}</view>
	  </view>
	  <view class="list_wrap" v-if="list.length>0">
	    <navigator class="list_item flex_box" v-for='item in list[tabIndex].teacherList' :key='item.id' :url="'/pages/details/details?teacherNo='+item.teacherNo">
	      <image :src="item.headPic" class="avatar" mode="aspectFill"></image>
	      <view class="flex1">
	        <view class="title">{{item.teacherName}}</view>
	        <view class="tags flex_box_wrap">
	          <view class="tag tag_green" v-if="item.teachStyle1">{{item.teachStyle1}}</view>
						<view class="tag tag_green" v-if="item.teachStyle2">{{item.teachStyle2}}</view>
						<view class="tag tag_organge" v-if="item.teachStyle3">{{item.teachStyle3}}</view>
	          <!-- <view class="tag tag_green" v-if="getDayStatus(item,1)">周六{{getDayStatus(item,1)}}</view> -->
	          <!-- <view class="tag tag_green" v-if="getDayStatus(item,2)">周日{{getDayStatus(item,2)}}</view> -->
	        </view>
	        <view class="price">¥{{item.classPrice}}/时</view>
	      </view>
	      <view class="make_btn">约课</view>
	    </navigator>
	  </view>
	</view>
</template>

<script>
	import amap from '@/common/js/amap-wx.js';
	import {getDayStatus} from '@/common/js/public.js'
	export default {
		data() {
			return {
				key:'8fb9fc11fb1c4a04cc839033fc5fdb6d',
				amapPlugin:null,
				swiperList:[],
				tabIndex:0,
				list:[],
				customerInfo:'',
				position:'',
				index:[],
				latitude:'',
				longitude:''
			}
		},
		onLoad() {
			this.position = uni.getStorageSync('tutor_position') || ''
			if(this.position) return
			this.amapPlugin = new amap.AMapWX({  
				key: this.key  
			});
			this.getRegeo()
		},
		onShow() {
			this.customerInfo = uni.getStorageSync('tutor_customerInfo') || ''
			this.queryAllAdvertListByType()
			this.queryAllTeacherList()
		},
		onShareAppMessage() {
			return {
				path:'/pages/details/details?teacherNo='+this.teacherNo,
				title:'一对一大学生辅导'
			}
		},
		onShareTimeline() {
			return {
				path:'/pages/details/details?teacherNo='+this.teacherNo,
				title:'一对一大学生辅导'
			}
		},
		methods: {
			getRegeo() {  
				uni.showLoading({  
					title: '获取信息中'
				});
				uni.getLocation({
					type: 'gcj02', //返回可以用于wx.openLocation的经纬度
					success: (res) => {
						console.log(res)
						var latitude = res.latitude//维度
						var longitude = res.longitude//经度
						console.log(latitude,longitude)
						this.amapPlugin.getRegeo({
							location: '' + longitude + ',' + latitude + '',
							success: (data) => {
								console.log(data)
								if (data && data.length>0) {
									let pos = {
										city:data[0].name,
										// province:data[0].regeocodeData.addressComponent.province,
										// city:data[0].regeocodeData.addressComponent.city,
										// district:data[0].regeocodeData.addressComponent.district,
										// township:data[0].regeocodeData.addressComponent.township
									}
									this.position = pos
									// this.$store.commit('set_position',pos)
									uni.setStorageSync('tutor_position',pos)
								}
								uni.hideLoading();
							},fail:err=>{
								toast('定位获取失败，请手动选择')
								uni.hideLoading();
							}
						});
					}
				})
				setTimeout(()=>{
					uni.hideLoading();
				},5000)
			},
			choosePos() {
				uni.chooseLocation({
					success: (res) =>{
						console.log(res)
						let pos = {
							city:res.name
						}
						this.position = pos
						uni.setStorageSync('tutor_position',pos)
					}
				});
			},
			// 轮播图数据
			queryAllAdvertListByType() {
				this.$api.queryAllAdvertListByType({advertType:1}).then(res=>{
					this.swiperList = res.data
				})
			},
			// 老师数据
			queryAllTeacherList() {
				this.$api.queryAllTeacherList().then(res=>{
					this.list = res.data
				})
			},
			getDayStatus(item,type) {
				return getDayStatus(item,type)
			},
			//事件处理函数
			tabChange(idx) {
				this.tabIndex = idx
			},
			// 去购物车
			goCart() {
				if (this.customerInfo) {
					uni.navigateTo({
						url:'/pages/cart/cart'
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '请先登录',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url:'/pages/login/login'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			}
		}
	}
</script>

<style scoped>
	@import '../../common/common.css';
	.container{
	  padding:0 30rpx;
	  font-size: 26rpx;
	  color:#333;
		background-color: #fff;
	}
	.top_box{
	  padding:10rpx 0;
	}
	.list_wrap{
		padding:0;
	}
	.pos_icon{
	  width: 24rpx;
	  height: 30rpx;
	}
	.right_icon{
	  width: 18rpx;
	  height: 18rpx;
	}
	.pos_text{
	  padding:0 10rpx;
	  line-height: 37rpx;
	}
	.cart_btn{
	  background-color: #EA7355;
	  width: 140rpx;
	  height: 56rpx;
	  line-height: 56rpx;
		font-size: 26rpx;
		letter-spacing: 2rpx;
	}
	.swiper_box{
	  height: 300rpx;
	}
	.swiper-item{
	  width: 100%;
	  height: 100%;
		border-radius: 20rpx;
	}
	.tabs{
	  padding:20rpx 0;
		overflow-x: auto;
	}
	.tab_item{
	  position: relative;
		margin-right: 40rpx;
	}
	.tab_item.cur{
	  color: #34BE97;
		font-weight: bold;
	}
	.tab_item.cur::after{
	  display: block;
	  content: ' ';
	  position: absolute;
	  left: 50%;
	  bottom:-15rpx;
	  margin-left: -20rpx;
	  width: 40rpx;
	  height: 10rpx;
	  background-color: #34BE97;
	  border-radius: 10rpx;
	  box-shadow: 0px 3px 6px rgba(52, 181, 151, 0.2);
	}
	.make_btn{
	  width: 80rpx;
	  height: 80rpx;
	  text-align: center;
	  line-height: 80rpx;
	  color:#fff;
	  font-size: 28rpx;
	  background-color: #34BE97;
	  border-radius: 50%;
		margin-left: 10rpx;
	  box-shadow: 0px 3px 6px rgba(52, 181, 151, 0.2);
	}
</style>
